<template>
  <div>
    <div class="search-top-box">
   
    <van-button round type="info" size="small" icon="search" to='/search'>搜索</van-button>
    </div>
    <div class="top-nav">
      <van-tabs type="line" :border="border" v-model="activeIndex">
        <van-tab
          v-for="(channel, index) in channelsList"
          :title="channel.name"
          :key="index"
         
        >
          <articles class="articles"  :channel="channel"></articles>
        </van-tab>
      </van-tabs>
      <span class="iconfont icon-gengduo" @click="editNav"></span>

      <!-- 弹出层 -->
      <van-popup
        v-model="show"
        position="bottom"
        :closeable="true"
        close-icon-position="top-left"
        :style="{ height: '100%' }"
      >
        <article-edit
          :myChannels="channelsList"
          :activeIndex="activeIndex"
          @homelight="homelight"
          @redActiveIndex="redActiveIndex"
        ></article-edit>
      </van-popup>
    </div>
  </div>
</template>

<script>
import { channels } from '@/api/user'

// 导入文章组件
import articles from './components/articles'
import articleEdit from './components/articleEdit'

// 导入vuex 中的state 中的数据
import { mapState } from 'vuex'

// 导入工具函数
import { getItem, setItem } from '@/utils/Storage'

export default {
  components: {
    articles,
    articleEdit,
  },
  data() {
    return {
      value: '',
      border: true,
      show: false,

      activeIndex: 0,
      channelsList: [],
    }
  },
  computed: {
    ...mapState(['userToken']),
  },

  methods: {
    editNav() {
      this.show = true
    },

    // 获取频道类表

    // 如果登录就发请求拿数据， 如果没有登录优先从本地缓存里拿， 如果本地缓存也没有就发请求取拿
    async getChannels() {
      if (this.userToken) {
        const res = await channels()
        console.log(res, 666)
        this.channelsList = res.data.data.channels
        setItem('channle', res.data.data.channels)
        console.log('已登录发请求并存储数据到本地')
      } else {
        const res = await channels()
        this.channelsList = getItem('channle') || res.data.data.channels
        // this.channelsList = res.data.data.channels
        console.log( this.channelsList , 5555);
        
        console.log('未登录优先到本地拿数据')
      }
    },

    // 弹出层频道被点击后主页tabs 高亮
    homelight(index) {
      console.log(index)
      this.show = false
      this.activeIndex = index
    },

    // 接收到弹出层高亮的新id 赋值给默认id
    redActiveIndex(index) {
      this.activeIndex = index
    },
  },
  created() {
    this.getChannels()
  },
  mounted() {},
}
</script>

<style scoped lang='less'>
.search-top-box {
  width: 100%;
  background-color: #3296fa;
  display: flex;
  
  /deep/.van-button {
   margin: 20px auto;
   width: 70%;
  }
}
.top-nav {
  .van-tabs {
    position: absolute;
    .van-nav {
      overflow: hidden;
    }
  }
  .icon-gengduo {
    position: absolute;
    right: 0;
    width: 60px;
    height: 80px;
    background-color: #fff;
    text-align: center;
    line-height: 80px;
    z-index: 999;
  }

  .icon-guanbi {
    color: #c8c9cc;
    margin: 40px;
    font-size: 30px;
    font-weight: 500;
  }
}
.articles {
  width: 100vw;
}
</style>